<template lang="html">
  <div class="cron" :val="value_">
    <Tabs v-model="activeName">
      <TabPane :label="$t('sec')" name="s" :disabled="tabdisable.disableds">
        <SecondAndMinute v-model="sVal" :lable="$t('sec')"></SecondAndMinute >
      </TabPane>
      <TabPane :label="$t('min')" name="m" :disabled="tabdisable.disabledm">
        <SecondAndMinute v-model="mVal" :lable="$t('min')"></SecondAndMinute >
      </TabPane>
      <TabPane :label="$t('hour')" name="h" :disabled="tabdisable.disabledh">
        <hour v-model="hVal" :lable="$t('hour')"></hour>
      </TabPane>
      <TabPane :label="$t('day')" name="d" :disabled="tabdisable.disabledd">
        <day v-model="dVal" :lable="$t('day')"></day>
      </TabPane>
      <TabPane :label="$t('mon')" name="month" :disabled="tabdisable.disabledMonth">
        <month v-model="monthVal" :lable="$t('mon')"></month>
      </TabPane>
      <TabPane :label="$t('week')" name="week" :disabled="tabdisable.disabledWeek">
        <week v-model="weekVal" :lable="$t('week')"></week>
      </TabPane>
      <TabPane :label="$t('year')" name="year" :disabled="tabdisable.disabledYear">
        <year v-model="yearVal" :lable="$t('year')" ></year>
      </TabPane>
    </Tabs>
    <!-- table -->
    <Table border :columns="columns" :data="tableData" size="small" style="width: 100%;">
    </Table>
  </div>
</template>

<script>
import SecondAndMinute from './secondAndMinute'
import hour from './hour'
import day from './day'
import month from './month'
import week from './week'
import year from './year'
export default {
  name: 'CronItem',
  components: {SecondAndMinute, hour, day, month, week, year},
  props: {
    value: {type: String},
    showtabls: {
      /*允许显示哪些 页，如：[秒，分，时......]*/
      type: Array,
      default(){return [];}
    }
  },
  data () {
    return {
      tabdisable:{
        disableds:true,
        disabledm:true,
        disabledh:true,
        disabledd:true,
        disabledMonth:true,
        disabledWeek:true,
        disabledYear:true,
      },
      activeName: 's',
      sVal: '0',
      mVal: '0',
      hVal: '0',
      dVal: '0',
      monthVal: '0',
      weekVal: '?',
      yearVal: '0',

    }
  },
  watch: {
    'value' (a, b) {
      this.updateVal()
    },
    showtabls(a,b){
      //console.log("watch.showtabls");
      if (!!this.showtabls){
        for(let i in this.showtabls){
          if (this.showtabls[i]===this.$t('year')){
            this.tabdisable.disabledYear=false;
          };
          if (this.showtabls[i]===this.$t('week')){
            this.tabdisable.disabledWeek=false;
          };
          if (this.showtabls[i]===this.$t('mon')){
            this.tabdisable.disabledMonth=false;
          };
          if (this.showtabls[i]===this.$t('day')){
            this.tabdisable.disabledd=false;
          };
          if (this.showtabls[i]===this.$t('hour')){
            this.tabdisable.disabledh=false;
          };
          if (this.showtabls[i]===this.$t('min')){
            this.tabdisable.disabledm=false;
          };
          if (this.showtabls[i]===this.$t('sec')){
            this.tabdisable.disableds=false;
          };
        }
      }

      if (!this.tabdisable.disableds)
        this.activeName = "s"
      else if (!this.tabdisable.disabledm)
        this.activeName = "m"
      else if (!this.tabdisable.disabledh)
        this.activeName = "h"
      else if (!this.tabdisable.disabledd)
        this.activeName = "d"
      else if (!this.tabdisable.disabledMonth)
        this.activeName = "month"
      else if (!this.tabdisable.disabledWeek)
        this.activeName = "week"
      else if (!this.tabdisable.disabledYear)
        this.activeName = "year"
      else
        this.activeName = "s";
    }

  },
  computed: {
    tableData () {
      return [{
        sVal: this.sVal,
        mVal: this.mVal,
        hVal: this.hVal,
        dVal: this.dVal,
        monthVal: this.monthVal,
        weekVal: this.weekVal,
        yearVal: this.yearVal
      }]
    },
    value_ () {
      if (!this.dVal && !this.weekVal) {
        return ''
      }

      if (this.dVal === '?' && this.weekVal === '?') {
        this.$Message.error('日期与星期不可以同时为“不指定”')
      }
      if (this.dVal !== '?' && this.weekVal !== '?') {
        this.$Message.error('日期与星期必须有一个为“不指定”')
      }
      let v = `${this.sVal} ${this.mVal} ${this.hVal} ${this.dVal} ${this.monthVal} ${this.weekVal} ${this.yearVal}`
      if (v !== this.value) {
        this.$emit('input', v)
      }
      return v
    },
    columns(){
      return[
        {title: this.$t('sec'), key: 'sVal', width: 70},
        {title: this.$t('min'), key: 'mVal', width: 70},
        {title: this.$t('hour'), key: 'hVal', width: 70},
        {title: this.$t('day'), key: 'dVal', width: 70},
        {title: this.$t('mon'), key: 'monthVal', width: 70},
        {title: this.$t('week'), key: 'weekVal', width: 70},
        {title: this.$t('year'), key: 'yearVal'}]
    }
  },
  methods: {
    updateVal () {
      if (!this.value) {
        return
      }
      let arrays = this.value.split(' ')
      this.sVal = arrays[0]
      this.mVal = arrays[1]
      this.hVal = arrays[2]
      this.dVal = arrays[3]
      this.monthVal = arrays[4]
      this.weekVal = arrays[5]
      this.yearVal = arrays[6]
    },
  },
  created () {
    this.updateVal()
  },

}
</script>

<style lang="css">
.cron {
  text-align: left;
  padding: 10px;
  background: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
}
</style>
